<!--首页组件
 -->
<template>
  <div class="home" id="home" name="home">
    <!-- 轮播图 -->
    <div class="block">
      <el-row>
        <el-col :span="16"><div class="grid-content bg-purple blockddd">
            <el-carousel height="530px" width="850px">
              <el-carousel-item  height="500px" width="850px" v-for="item in carousel" :key="item.carousel_id">
                <img style="height:526px;width:850px;" :src="item.imgPath" :alt="item.describes" />
              </el-carousel-item>
            </el-carousel>
          </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light seckill">
           <Seckill></Seckill>
          </div></el-col>
      </el-row>
    </div>
    <!-- 轮播图END -->
    <div class="main-box">
      <div class="main">
        <!-- 女衬衫商品展示区域 -->
        <div class="accessory" id="promo-menu">
          <div class="box-hd">
            <div class="title">时尚女装/半袖/T恤</div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img  style="height:300px;" src="../assets/imgs/banxiu1.jpg" />
                </li>
                <li>
                  <img  style="height:300px;" src="../assets/imgs/banxiu2.jpg" />
                </li>
              </ul>
            </div>
            <div class="list">
              <MyList :list="girlShirtList" :isMore="true"></MyList>
            </div>
          </div> 
        </div>
        <!-- 女衬衫商品展示区域END -->
         <!-- 女套装商品展示区域 -->
        <div class="accessory" id="promo-menu">
          <div class="box-hd">
            <div class="title">时尚女装/套装</div>
          </div> 
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img  style="height:300px;" src="../assets/imgs/taozhuang1.jpg" />
                </li>
                <li>
                  <img  style="height:300px;" src="../assets/imgs/taozhaung2.jpg" />
                </li>
              </ul>
            </div>
            <div class="list">
              <MyList :list="girlSuitList" :isMore="true"></MyList>
            </div>
          </div> 
        </div>
        <!-- 女套装商品展示区域END -->
         <!-- 女连衣裙商品展示区域 -->
        <div class="accessory" id="promo-menu">
          <div class="box-hd">
            <div class="title">时尚女装/连衣裙</div>
          </div> 
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img  style="height:300px;" src="../assets/imgs/lianyiqun1.jpg" />
                </li>
                <li>
                  <img  style="height:300px;" src="../assets/imgs/lianyiqun2.jpg" />
                </li>
              </ul>
            </div>
            <div class="list">
              <MyList :list="girlDressList" :isMore="true"></MyList>
            </div>
          </div> 
        </div>
        <!-- 女连衣裙商品展示区域END -->
         <!-- 女裤子商品展示区域 -->
        <div class="accessory" id="promo-menu">
          <div class="box-hd">
            <div class="title">时尚女装/裤子</div>
          </div> 
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img  style="height:300px;" src="../assets/imgs/kuzi1.jpg" />
                </li>
                <li>
                  <img  style="height:300px;" src="../assets/imgs/kuzi2.jpg" />
                </li>
              </ul>
            </div>
            <div class="list">
              <MyList :list="girlPantsList" :isMore="true"></MyList>
            </div>
          </div> 
        </div>
        <!-- 女裤子商品展示区域END -->
         <!-- 男半袖商品展示区域 -->
        <div class="accessory" id="promo-menu">
          <div class="box-hd">
            <div class="title">精品男装/半袖</div>
          </div> 
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img  style="height:300px;" src="../assets/imgs/nanbanxiu1.jpg" />
                </li>
                <li>
                  <img  style="height:300px;" src="../assets/imgs/nanbanxiu2.jpg" />
                </li>
              </ul>
            </div>
            <div class="list">
              <MyList :list="boyShirtList" :isMore="true"></MyList>
            </div>
          </div> 
        </div>
        <!-- 女裤子商品展示区域END -->
      </div>
    </div>
    
  </div>
</template>
<script>
import Seckill from "./Seckill"
export default {
  data() {
    return {
      // 轮播图数据
      carousel: [
        {carousel_id: 1,
          describes: "123456",
          imgPath: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2F9331e3340152a467a3f9dfa24725687b16619a0b16f01-ujXUpj_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652587647&t=b748874bbf4410836dfb8963fdd0e2b7"
          },
        {carousel_id: 2,
          describes: "123456",
          imgPath: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fmaterials.cdn.bcebos.com%2Fimages%2F64285884%2Fbcb966ecc945d0226930ed99c445eeb5.jpeg&refer=http%3A%2F%2Fmaterials.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650891653&t=6b013105f454e4c0ea1fbe98a2f59b87"
          },
        {carousel_id: 3,
          describes: "123456",
          imgPath: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2F5377e0fc608bc19c613a7486f571601c459d0703952fe-KZJaQ1_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652587647&t=63dc3995366e33b9bde51e77e6751065"
          },
        {carousel_id: 4,
          describes: "123456",
          imgPath: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F13f1787668de6d1909a126f1ec7a516a10a372eb306ff-TNNLZP_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652587647&t=7497297eb169987a625f06c2ef5276db"
          },
      ], 
      // 棉衣商品列表
      cottonList: [
        {category_id: 31,
        product_id: 31,
        product_intro: "",
        product_name: "Redmi K30",
        product_num: 10,
        product_picture: "https://img.alicdn.com/imgextra/i1/642496034/O1CN01lubZVf1uRcbJY2b7i_!!642496034.jpg_430x430q90.jpg",
        product_price: 2000,
        product_sales: 0,
        product_selling_price: 1599,
        product_title: "半袖"},
        ],
        // 女衬衫列表
        girlShirtList:[],
        boyShirtList:[],
        // 女套装列表
        girlSuitList:[],
        // 女连衣裙列表
        girlDressList:[],
        // 女裤子列表
        girlPantsList:[],
        // 女卫衣列表
        girlFleeceList:[],
        // 女毛衣列表
        girlSweaterList:[],
        // 女羽绒服列表
        girlDowncoatList:[],
      // downCoatList: "", //羽绒服商品列表
      // blousonsList: "", //棉服商品列表
    };
  },
  created() {
    this.getGirlShirtList()
    this.getGirlSuitList()
    this.getGirlDressList()
    this.getGirlPantsList()
    this.getBoyShirtList()
  },
  components:{
    Seckill
  },
  methods: {
    // 获取女衬衫列表
    async getGirlShirtList(){
       const {data:res} = await this.$http(`/xuanmall/spumessage/getAllShopByCatalogId?catalogId=4&page=1&limit=200`)
      console.log("女衬衫商品",res)
      res.page.list.forEach((value,index) =>{
        if(index <=7){
          if(value.publishStatus){
         var data = {};
         data.product_id = value.id
         data.product_name = value.spuName
         data.product_picture = value.images[0]
         data.product_selling_price = value.price
         data.product_num = 0
         value.skus.forEach(item =>{
         data.product_num += item.saleCount
         })
         this.girlShirtList.push(data)}
        }
       
      })
    },
     // 女套装列表
     async getGirlSuitList(){
       const {data:res} = await this.$http(`/xuanmall/spumessage/getAllShopByCatalogId?catalogId=22&page=1&limit=200`)
     
      res.page.list.forEach((value,index) =>{
        if(index <=7){
          if(value.publishStatus){
         var data = {};
         data.product_id = value.id
         data.product_name = value.spuName
         data.product_picture = value.images[0]
         data.product_selling_price = value.price
         data.product_num = 0
         value.skus.forEach(item =>{
         data.product_num += item.saleCount
         })
         this.girlSuitList.push(data)}
        }
      })
    },
     // 女连衣裙列表
     async getGirlDressList(){
       const {data:res} = await this.$http(`/xuanmall/spumessage/getAllShopByCatalogId?catalogId=23&page=1&limit=200`)
      
      res.page.list.forEach((value,index) =>{
        if(index <=7){
          if(value.publishStatus){
         var data = {};
         data.product_id = value.id
         data.product_name = value.spuName
         data.product_picture = value.images[0]
         data.product_selling_price = value.price
         data.product_num = 0
         value.skus.forEach(item =>{
         data.product_num += item.saleCount
         })
         this.girlDressList.push(data)}
        }
       
      })
    },
     // 女裤子列表
     async getGirlPantsList(){
       const {data:res} = await this.$http(`/xuanmall/spumessage/getAllShopByCatalogId?catalogId=24&page=1&limit=200`)
      
      res.page.list.forEach((value,index) =>{
        if(index <=7){
          if(value.publishStatus){
         var data = {};
         data.product_id = value.id
         data.product_name = value.spuName
         data.product_picture = value.images[0]
         data.product_selling_price = value.price
         data.product_num = 0
         value.skus.forEach(item =>{
         data.product_num += item.saleCount
         })
         this.girlPantsList.push(data)}
        }
       
      })
    },
    // 男半袖
    async getBoyShirtList(){
       const {data:res} = await this.$http(`/xuanmall/spumessage/getAllShopByCatalogId?catalogId=9&page=1&limit=200`)
      
      res.page.list.forEach((value,index) =>{
        if(index <=7){
          if(value.publishStatus){
         var data = {};
         data.product_id = value.id
         data.product_name = value.spuName
         data.product_picture = value.images[0]
         data.product_selling_price = value.price
         data.product_num = 0
         value.skus.forEach(item =>{
         data.product_num += item.saleCount
         })
         this.boyShirtList.push(data)}
        }
       
      })
    }
  }
};
</script>
<style scoped >
@import "../assets/css/index.css";
.blockddd{
  height: 530px;
}
.seckill{
  height: 530px;
}
</style>